---
layout: default
---

<div class="blog-main-banner" id="banner">
  <div class="container">
    <h1>Welcome to my blog!</h1>
    <p>优胜劣汰，适者生存，是世界不变的真理。</p>
    <p>与其感慨路难行，不如马上出发。</p>
    <button class="hide" id="hide-banner">Hide</button>
  </div>
</div>
<script>
  var bannerManager = (function() {

    const bannerDom = document.querySelector('#banner');
    const KEY_BANNER_HIDE = "banner_hide";

    function show(noCache) {
      (noCache) || localStorage.setItem(KEY_BANNER_HIDE, '');
      bannerDom.style.height = 'auto';
    }

    function hide(noCache) {
      if (noCache) {
        localStorage.setItem(KEY_BANNER_HIDE, 'true');
        bannerDom.style.transition = 'none';
        bannerDom.style.height = '0px';
        // bannerDom.style('transition', '');
      } else {
        localStorage.setItem(KEY_BANNER_HIDE, 'true');
        bannerDom.style.height = '0px';
      }
    }

    function init() {
      if (localStorage.getItem(KEY_BANNER_HIDE) === 'true') {
        hide(true);
      }
      document.querySelector('#hide-banner').addEventListener('click', function() { hide(); });
    }
    return { show, hide, init }
  })();

  bannerManager.init();

</script>
<div class="container">
  {%- if site.posts.size > 0 -%}
  <div class="blog-main">
    <ul class="blog-article-list">
      {%- for post in site.posts -%}
      {%- assign date_format = site.minima.date_format | default: "%Y-%m-%d" -%}
      <li class="article">
        <h2 class="title"><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h2>
        <p class="introduction">
          发布日期： {{ post.date | date: date_format }}
          |
          相关标签：
          {%- for tag in post.tags -%}
          <a href="#" class="tag">{{ tag }}</a>
          {%- endfor -%}
        </p>
        <div class="short-content">
          {% if post.summary %}
            {{ post.summary }}
          {% else %}
            {{ post.content | truncatewords:50 | strip_html }}
          {% endif %}
        </div>
      </li>
      {%- endfor -%}
    </ul>
  </div>
  {%- endif -%}
  <aside class="blog-side">
    <div class="side-container">
      {%- include side.html -%}
    </div>
  </aside>
</div>
